import React, { Component } from "react";
import { connect } from "react-redux";
import Header from "../../components/Header/Header";
import Search from "../../components/Search/Search";
import { SideBar } from "antd-mobile";
import "./Cate.less";
import {
  actions,
  getFirstList,
  getSecondList,
  getKey,
  getFid,
} from "../../store/modules/cate.js";
import { bindActionCreators } from "redux";

class Cate extends Component {
  componentDidMount() {
    this.props.cate.reqFirstList();

    //一进页面就判断是否有fid
    this.props.cate.isFid(this.props);
    
  }
  render() {
      let {firstList,secondList,fid,cate:{change,getValue,search},history:{push}} = this.props;
    return (
      <>
        <Header title="商品分类"></Header>

        {/* 搜索栏 */}
        <Search
          search={() => search(push)}
          getValue={(e) => getValue(e)}
        ></Search>

        {/* 导航侧边栏 */}
        <div className="content">
          <div className="nav_left">
            <SideBar activeKey={String(fid)} onChange={(e) => change(e)}>
              {firstList.map((item) => (
                <SideBar.Item key={item.id} title={item.catename} />
              ))}
            </SideBar>
          </div>
          <div className="main_right">
            {secondList.map((item) => {
              return (
                <div
                  className="items"
                  key={item.id}
                  onClick={() =>
                    this.props.history.push("/detail?id=" + item.id)
                  }
                >
                  <img src={item.img} alt="" />
                  <p>{item.goodsname}</p>
                </div>
              );
            })}
          </div>
        </div>
      </>
    );
  }
}
const mapStateToProps = (state) => {
  return {
    firstList: getFirstList(state),
    secondList: getSecondList(state),
    key: getKey(state),
    fid: getFid(state),
  };
};
const mapDispatchToProps = (dispatch) => {
  return {
    cate: bindActionCreators(actions, dispatch),
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(Cate);
